<template>
    <div>
        用户列表
        <el-table :data="manageList" stripe style="width: 100%">
            <el-table-column prop="time" label="注册时间"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column label="头像">
                <template slot-scope="{row}">
                    <img class="image" :src="row.head" alt="" @click="PicturePreview(row)">
                </template>
            </el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="position" label="职业"></el-table-column>
        </el-table>
        <!-- 图片预览弹窗 -->
        <img-dialog :imgDialogINfo="imgDialogINfo"></img-dialog>
    </div>
</template>

<script>
import imgDialog from './components/imgDialog.vue'
import { getUserList } from '@/api/manage'
export default {
    components: {imgDialog},
    name: 'MyAppIndex',

    data() {
        return {
            pageInfo: {
                page: 0,
                pagesize: 10,
            },
            manageList: [],
            total: 0,
            imgDialogINfo: {
                imgShow: false,//控制图片预览弹窗的显示与隐藏
                imgUrl: "",//当前点击的图片路径
            },

        };
    },

    mounted() {
        this.getList()
    },

    methods: {
        async getList() {
            let res = await getUserList(this.pageInfo)
            console.log(res);
            this.manageList = res.result
            this.total = res.total
        },
        // 图片预览
        PicturePreview(row) {
            this.imgDialogINfo.imgUrl = row.head
            this.imgDialogINfo.imgShow = true
        }
    },
};
</script>

<style lang="scss" scoped>
.image {
    width: 50px;
}
</style>